﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title>网站留言</title>
    <link href="static/css/message.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="static/js/m.js"></script>
    <style type="text/css">
        td {
            padding: 8px;
            font-size: 16px;
            color: #000;
        }
        
        td div {
            padding: 5px 15px 5px 15px;
            background-color: white;
            border-radius: 10px;
        }
        
        td div * {
            float: left
        }
        
        td div label {
            line-height: 30px
        }
        
        td div span {
            line-height: 30px;
            color: red
        }
        
        input.fill_text,
        .fill_textarea {
            vertical-align: middle;
            background-color: #fff;
            font-size: 14px;
            padding: 8px 10px;
            overflow-y: hidden;
            color: #808080
        }
        
        input.fill_text {
            width: 63%;
            line-height: 14px;
            height: 14px;
        }
        
        .fill_textarea {
            width: 500px;
            height: 150px;
        }
        
        input.fill_text:hover,
        .fill_textarea:hover {
            background: #fcebec;
        }
        
        .green_btn1 {
            border-radius: 10px;
            border: none;
            vertical-align: middle;
            cursor: pointer;
            text-align: center;
            color: #fff;
            line-height: 30px;
            background: #cc0000;
            width: 100%;
            padding: 5px 0px 5px 0px;
            font-size: 16px;
            font-family: "微软雅黑", Arial, "宋体";
        }
        
        .green_btn1:hover {
            background: #cc0000;
        }
        
        .green_btn2 {
            border-radius: 10px;
            border: none;
            vertical-align: middle;
            cursor: pointer;
            text-align: center;
            color: #fff;
            line-height: 30px;
            background: #0ec284;
            width: 100%;
            padding: 5px 0px 5px 0px;
            font-size: 16px;
            font-family: "微软雅黑", Arial, "宋体";
        }
        
        .green_btn2:hover {
            background: #0ec284;
        }
        
        .green_btn3 {
            border-radius: 10px;
            border: none;
            vertical-align: middle;
            cursor: pointer;
            text-align: center;
            color: #fff;
            line-height: 30px;
            background: #ff9900;
            width: 100%;
            padding: 5px 0px 5px 0px;
            font-size: 16px;
            font-family: "微软雅黑", Arial, "宋体";
        }
        
        .green_btn3:hover {
            background: #ff9900;
        }
        
        .green_btn4 {
            border-radius: 10px;
            border: none;
            vertical-align: middle;
            cursor: pointer;
            text-align: center;
            color: #fff;
            line-height: 30px;
            background: #99cc00;
            width: 100%;
            padding: 5px 0px 5px 0px;
            font-size: 16px;
            font-family: "微软雅黑", Arial, "宋体";
        }
        
        .green_btn4:hover {
            background: #99cc00;
        }
        
        .green_btn5 {
            border-radius: 10px;
            border: none;
            vertical-align: middle;
            cursor: pointer;
            text-align: center;
            color: #fff;
            line-height: 30px;
            background: #42b3ff;
            width: 100%;
            padding: 5px 0px 5px 0px;
            font-size: 16px;
            font-family: "微软雅黑", Arial, "宋体";
        }
        
        .green_btn5:hover {
            background: #42b3ff;
        }
        
        .gray_btn {
            display: none;
            border: none;
            vertical-align: middle;
            cursor: pointer;
            text-align: center;
            color: #fff;
            line-height: 2em;
            height: 2em;
            background: #ff9900;
            width: 80px;
            font-size: 16px;
            font-family: "微软雅黑", Arial, "宋体";
        }
        
        .gray_btn:hover {
            background: #f2050a;
        }
        
        select {
            padding: 5px 5px 5px 5px;
            width: 180px;
            font-size: 14px;
            color: #000;
            appearance: none;
            -moz-appearance: none;
            -webkit-appearance: none;
        }
        
        #clewDiv {
            display: none;
            padding: 100px;
            line-height: 5;
            color: red;
            text-align: center;
            font-size: 18px
        }
    </style>
</head>

<body style="background:none;padding:0px;overflow:hidden">
    <div id="clewDiv">
        正在提交
    </div>
    <form method="post" action="#" id="myform" style="margin:0px">
        <table cellspacing="0" width="100%">
            <tr>
                <td colspan="2">
                    <div>
                        <label>我想要：</label><span>*</span>
                        <select id="columnList" name="columnID">
                            <option value="1">LOGO设计</option>
                            <option value="2">商标注册</option>
                            <option value="3">商标交易</option>
                            <option value="4">专利版权</option>
                    </select>
                    </div>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <div>
                        <label>手机号：</label><span>*</span>
                        <input name="phone" id="phone" maxlength="25" class="fill_text" />
                    </div>
                </td>
            </tr>
            <tr>
                <td colspan="2" height="30" style="padding-top:10px;text-align:center">
                    <button id="submitBtn" name="submit" type="submit" class="green_btn1" onclick="return addMessage()">提交获取报价</button>
                    <input id="Reset3" name="reset" type="reset" value="清 除" class="gray_btn" />
                </td>
            </tr>
        </table>

    </form>
    <script>
        let arr = [
            '提交获取报价',
            '免费查询商标/获取报价',
            '免费查询商标/获取报价',
            '提交获取报价'
        ]
        let num = location.search.substr(-1, 1) - 1
        let columnList = document.getElementById('columnList');
        let submitBtn = document.getElementById('submitBtn');
        let option = columnList.getElementsByTagName('option');
        option[num].setAttribute('selected', 'selected');
        submitBtn.innerHTML = arr[num]
        submitBtn.setAttribute('class', 'green_btn' + (num + 1))
    </script>

</body>

</html>